<template>
	<div>
		<section class="set" v-if='hasMobile'>
			<div class="title">&nbsp;&nbsp;已绑定手机号 <span>{{worked_mobile}}</span></div>
			<div class="m_top"><label>输入验证码</label><input v-model="yzm" v-on:input="check('changemobile')" type="number" class="input yzm_input"
				 name="yzm" placeholder="请输入验证码"><span class="sendyzm" v-if="!isGetYzm" @click='sendyzm("changemobile")'>发送验证码</span>
				<span class="sendyzm" v-else style="color:#999;">
					重新发送({{time}})
				</span>
			</div>
			<p class="tips m_top">注意：验证码将发送到原绑定手机</p>
			<div class="m_top"><label>换绑手机号</label><input v-model="mobile" v-on:input="check('changemobile')" type="number"
				 placeholder="输入手机号" class="input">
			</div>
			<div class="m_top"><label>再次输入</label><input v-model="repeat_mobile" v-on:input="check('changemobile')" type="number"
				 class="input" placeholder="再次输入手机号"></div>
			<p class="tips m_top">注意：请确保手机号正确，否则影响下次换绑操作</p>

			<div class="send" :class="{'active': isActive}" @click='bindMobile("changemobile")'>提交</div>
		</section>
		<section class="set" v-else>
			<div><label>手机号</label> <input v-model="mobile" v-on:input="check('bind')" type="number" placeholder="请输入手机号" class="input">
			</div>
			<div class="m_top"><label>输入验证码</label><input v-model="yzm" v-on:input="check('bind')" type="number" class="input yzm_input"
				 name="yzm" placeholder="请输入验证码"><span class="sendyzm" v-if="!isGetYzm" @click='sendyzm("bind")'>发送验证码</span>
				<span class="sendyzm" v-else style="color:#999;">
					重新发送({{time}})
				</span>
			</div>
			<div class="send" :class="{'active': isActive}" @click='bindMobile("bind")'>提交</div>
		</section>
		<div class="loading mask" :class="{'show_loading':isAjax}">
			<div class="load_container">
				<p>正在发送中...</p>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				time: 0,
				mobile: '',
				repeat_mobile: '',
				yzm: '',
				isGetYzm: false,
				isAjax: false,
				isActive: false
			}
		},
		computed: {
			...mapState(["worked_mobile", "hasMobile"]),
		},
		methods: {
			...mapMutations(['UPDATEMOBILE']),
			check(action) {
				var l = this.mobile.length;
				var yzm_l = this.yzm.length;
				if (action == 'changemobile') {
					if (yzm_l == 6 && (l == 11) && (this.mobile == this.repeat_mobile)) {
						this.isActive = true;
					} else {
						this.isActive = false;
					}
				} else {
					if (yzm_l == 6 && (l == 11)) {
						this.isActive = true;
					} else {
						this.isActive = false;
					}
				}
			},
			sendyzm(action) {
				if (this.isGetYzm) return
				this.getyzm(action)
			},
			checkForm(action) {
				if (action == 'changemobile') {
					if (!this.yzm || !this.mobile || !this.repeat_mobile) {
						toast('请填写完整信息!')
						return false;
					}
					if (this.yzm.length != 6) {
						toast("验证码不对！")
						return false;
					}
					if (this.mobile.length != 11) {
						toast("手机号不对")
						return false;
					}
					if (this.mobile != this.repeat_mobile) {
						toast("两次输入的手机号不一样!");
						return false;
					}
				} else {
					if (!this.yzm || !this.mobile) {
						toast('请填写完整信息!')
						return false;
					}
					if (this.yzm.length != 6) {
						toast("验证码不对！")
						return false;
					}
					if (this.mobile.length != 11) {
						toast("手机号不对")
						return false;
					}
				}
				return true;
			},
			checkMobile() {
				/* 验证手机号 */
				if (this.mobile.length != 11) {
					toast("手机号不对！")
					return false
				}
				return true
			},
			getyzm(action) {
				if (action == 'bind' && !this.checkMobile()) {
					return
				}
				if (this.isGetYzm) {
					return
				}
				this.time = 60;
				var that = this;
				var mobile = this.mobile;

				if (action == 'changemobile') {
					mobile = userInfo.mobile;
				}
				var d = "sessionid=" + userInfo.sessionid + "&userid=" + userInfo.userid + "&mobile=" + mobile +
					"&action=" + action;
				this.axios.interceptors.request.use(function (config) {
					that.isGetYzm = true;
					return config;
				}, function (error) {
					return Promise.reject(error)
				});
				this.axios.interceptors.response.use(function (res) {
					return res;
				}, function (error) {
					that.isGetYzm = false;
					return Promise.reject(error);
				});
				this.axios.post(userInfo.hosturl + '/IOSApi/ajax_sendcode', d, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function (data) {
					var data = data.data;
					if (data.result == 0) {
						toast('发送成功');
						var timer = setInterval(function () {
							if (that.time-- <= 0) {
								that.isGetYzm = false;
								that.time = 60;
								clearInterval(timer)
							}
						}, 1000)
					} else if (data.result == 1037) {
						loginout(1)
					} else {
						that.isGetYzm = false;
						toast(data.error);
					}
				})
			},
			bindMobile(action) {
				// 防止请求还没请求完就连续点击
				if (this.isAjax) {
					return
				}
				//检查from
				if (!this.checkForm(action)) {
					return
				}
				var that = this
				var d = "";
				d = "sessionid=" + userInfo.sessionid + "&userid=" + userInfo.userid + "&mobile=" + this.mobile +
					"&yzm=" + this.yzm;
				var url = userInfo.hosturl + '/IOSApi/ajax_bind_mobile'
				if (action == 'changemobile') {
					d = "sessionid=" + userInfo.sessionid + "&userid=" + userInfo.userid + "&newmobile=" + this.mobile +
						"&yzm=" + this.yzm;
					url = userInfo.hosturl + '/IOSApi/ajax_change_mobile';
					this.msg = '修改成功'
				}
				this.axios.interceptors.request.use(function (config) {
					that.isAjax = true;
					return config;
				}, function (error) {
					return Promise.reject(error)
				});
				this.axios.interceptors.response.use(function (res) {
					that.isAjax = false;
					that.isActive = false;
					return res;
				}, function (error) {
					that.isAjax = false;
					return Promise.reject(error);
				});
				this.axios.post(url, d, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(function (data) {
					var data = data.data;
					if (data.result == 0) {
						//修改绑定手机号时通知君君
						if (action == 'changemobile') {
							yykitchangemobile(userInfo.mobile, that.mobile);
							that.repeat_mobile = '';
						}
						/* 绑定成功以后要更新userInfo里的手机号 */
						that.UPDATEMOBILE(that.mobile);
						that.mobile = '';
						that.yzm = '';
						//修改成功后计时清0，也清除了计时器
						that.time = 0;
						toast('操作成功');
						that.$router.go(-1);
					} else if (data.result == 1037) {
						loginout(1)
					} else {
						toast(data.error);
					}
				})
			},
		},
		created() {},
		activated() {},
	}

</script>
<style lang='scss' scoped>

</style>
